<template>
  <div id="onlyMonitor" class="onlyMonitor">
    <!--  桥梁选择  -->
<!--    YU 隐藏头部选桥功能-->
<!--    <div class="search">-->
<!--      <el-button-->
<!--        class="seletBtn top"-->
<!--        size="small"-->
<!--        type="success"-->
<!--        icon="el-icon-circle-plus-outline"-->
<!--        @click="selectBridge"-->
<!--        >桥梁选择</el-button-->
<!--      >-->
<!--      <el-tabs class="top" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">-->
<!--          <el-tab-pane-->
<!--            size="small"-->
<!--            :key="item.id"-->
<!--            v-for="(item, index) in editableTabs"-->
<!--            :label="item.name"-->
<!--            :name="item.id"-->
<!--          ></el-tab-pane>-->
<!--      </el-tabs>-->
<!--    </div>-->
    <CardContainer headerName="监测总览">
      <template slot="card-content">
        <div class="content-all">
          <div v-for="(item,index) in countList" :key="index">
          <div class="all-tab">
            <img class="logoImg" :src="require('@/assets/healthMonitorAssets/img/t'+ (index+1) +'.png')" />
            <div>
              <p>{{item.allNumber}}</p>
              <span>{{item.typeName}}</span>
            </div>
            <img class="lineImg" :src="require('@/assets/healthMonitorAssets/img/t'+ (index+1) +'-line.png')" alt="">
          </div>
          </div>
        </div>
      </template>
    </CardContainer>
    <!-- 车型车辆统计 -->
    <div class="car-content">
      <div>
        <CardContainer headerName="今日车型对比">
          <template slot="card-content">
            <NoData v-show="!carPie"/>
            <div id="CarPie" v-show="carPie"></div>
          </template>
        </CardContainer>
      </div>
      <div>
        <CardContainer headerName="今日超限车辆排名">
          <template slot="card-content">
            <div class="carList">
              <!-- <CarList :trainRateData='trainRateData' v-if="carTotal"></CarList> -->
              <NoData v-show="!carTotal"/>
              <CarList v-show="carTotal" :trainRateData='trainRateData'></CarList>
                <!-- <img src="../../../assets/images/pages/aliNoData.png" v-else style="width:100%;height:210px;" /> -->
            </div>
          </template>
        </CardContainer>
      </div>
      <div>
        <CardContainer headerName="今日车流量统计">
          <template slot="card-content">
                <div id="car" v-show="carData" style=" width: 100%; height: 190px;margin-top:20px;"></div>
                <NoData v-show="!carData"/>
                <!-- <div id="car" style=" width: 100%; height: 190px;margin-top:20px;" v-show="carData"></div> -->
                 <!-- <img src="../../../assets/images/pages/aliNoData.png" v-show="!carData" style="width:100%;height:205px;" /> -->
          </template>
        </CardContainer>
      </div>
    </div>

    <!--  病害分布 Disease distribution  -->
    <div class="diseaseDistribution">
      <CardContainer headerName="病害分布(10天)">
        <template slot="card-content">
          <div class="Distribution-content">
            <div class="Distribution-content-left">
              <div class="top">
                <!-- 技术评定  养护次数 巡检次数 -->
                <div>
                  <div class="icon-img">
                    <img src="../../../assets/healthMonitorAssets/img/icon_dj.png" alt="" />
                  </div>
                  <div class="icon-text">
                    <p style="color: #437cdf;">{{level}}</p>
                    <p>技术评定</p>
                  </div>
                </div>
                <div>
                  <div class="icon-img">
                    <img src="../../../assets/healthMonitorAssets/img/icon_yf.png" alt="" />
                  </div>
                  <div class="icon-text">
                    <p style="color: #8b57df;">{{pointNumber}}</p>
                    <p>养护次数</p>
                  </div>
                </div>
                <div>
                  <div class="icon-img">
                    <img src="../../../assets/healthMonitorAssets/img/icon_xj.png" alt="" />
                  </div>
                  <div class="icon-text">
                    <p style="color: #63da9d;">{{distributionNum}}</p>
                    <p>巡检次数</p>
                  </div>
                </div>
              </div>
              <!-- <img class="img" :src="facedImg" alt="" /> -->
              <div class="bgbg" :style="{backgroundImage: 'url(' + facedImg + ')'}">
              </div>
            </div>
            <div class="Distribution-content-right">
              <VuePerfectScrollbar class="disease" :settings="settings">
                <h3>病害查看</h3>
                  <div v-if="diseaseData.length > 0">
                <div class="disease-line" v-for="(item, index) in diseaseData" :key="index" >
                  <div class="disease-left">
                    <img :src="item.image" alt="" />
                  </div>
                  <div class="disease-right">
                    <h4>{{item.ext6 }}</h4>
                    <p>{{ item.problemNote }}</p>
                  </div>
                </div>
                </div>
                 <NoData v-else/>
              </VuePerfectScrollbar>
            </div>
          </div>
        </template>
      </CardContainer>
    </div>

    <!--病害趋势统计-->
    <div class="trend">
      <div class="trend-left">
        <CardContainer headerName="病害趋势统计（10天）">
          <template slot="card-content">
            <!-- <div id="trend-line" class="trend-line" ></div> -->
            <div id="trend-line" v-show="trendLineTotal" class="trend-line"></div>
            <NoData v-show="!trendLineTotal"/>
            <!-- <div id="trend-line" class="trend-line" v-show="trendLineTotal"></div>
            <div style="width:100%;height:205px;background:#f6f6f6;display:flex;justify-content:center;" v-if="!trendLineTotal">
            <img src="../../../assets/images/pages/aliNoData.png"  style="width:50%;height:100%;" /> -->
            <!-- </div> -->
          </template>
        </CardContainer>
      </div>
      <div class="trend-right">
        <CardContainer headerName="病害统计（10天）">
          <template slot="card-content">
            <div v-show="trendPieTotal" id="trend-pie" class="trend-pie"></div>
            <NoData v-show="!trendPieTotal"/>
            <!-- <div id="trend-pie" class="trend-pie" v-show="trendPieTotal"></div>
            <img src="../../../assets/images/pages/aliNoData.png" v-if="!trendPieTotal" style="width:100%;height:205px;" /> -->
          </template>
        </CardContainer>
      </div>
    </div>
    <SelectBridge ref="selectBridge" @getData="getData"></SelectBridge>
  </div>
</template>

<script>
// card 容器组件
import CardContainer from "../components/CardContainer";
// 搜索tab容器
import TabSearch from "../components/TabSearch";
// 表格容器
import TableList from "../components/TableList";
// 桥梁卡片
import BridgeCard from "./BridgeCard";
// echarts
import echarts from "echarts";
// 滚动条
import VuePerfectScrollbar from "vue-perfect-scrollbar";

import CarList from "../components/CarList";
import SelectBridge from "../components/SelectBridge"
import deseaseImage from "../../../assets/healthMonitorAssets/img/icon_disease.jpg";
import base from "../../../api/base"
import { mapState, mapMutations } from "vuex";

import NoData  from '../../../components/NoData'

export default {
  data () {
    return {
      countList:[],
      bridgeId:'',
      download:base.DOWNLOADURL,
      trainRateData:[],
      monitorNumFirst: 0,
      monitorNumSecond:0,
      monitorNumThird:0,
      monitorNumForth:0,
      level: '',
      pointNumber: 0,
      distributionNum: 0,
      editableTabsValue: "1",
       editableTabs: [

      ],
      CarPie: "",
      carPie: true,
      carData: true,
      carTotal: true,
      trendLineTotal: true,
      trendPieTotal: false,
      settings: {
        // perfectscrollbar settings
        maxScrollbarLength: 30,
        wheelSpeed: 1,
        swipeEasing: true,
      },
      diseaseData: [],
      trendLine: null,
      trendPie: null,
      carLine: null,
      facedImg:''
    };
  },
  components: {
    CardContainer,
    TabSearch,
    TableList,
    BridgeCard,
    VuePerfectScrollbar,
    CarList,
    SelectBridge,
    NoData
  },
  mounted () {
    this.getBridgeAll()
    // 监听窗口变化 - 多个图表同时刷新
    // window.addEventListener("resize", () => {
    //   this.CarPie.resize();
    //   this.trendLine.resize();
    //   this.trendPie.resize();
    //   this.carLine.resize()
    // });
  },
  watch: {
    bridgeId: {
      handler(newName, oldName) {
        console.log(newName,'ididiidididiid')
        if(newName!=0){
        this.queryPointNumberByBridgeId()
        this.countTodayType()
        this.countAutoWeight()
        this.trafficQuantityStatisticsByBridgeId()
        this.queryMaintenanceLevelByBridgeId()
        this.queryCountByBridgeId()
        this.problemList()
        this.distribution()
        setTimeout(() => {
          this.drawLine()
        this.drawTrendPie()
        }, 1000);
        this.queryAllBridgeFacedByBridgeId()
        }


      },
      deep: true,
      // immdiate:true
    },
    editableTabsValue: {
      handler(newVal) {
        // this.setBridgeId(newVal);
        this.bridgeId = newVal
        // this.initName = "立面";
      },
    },
  },
  created(){
  },
   computed: {
    ...mapState("statistical", {
      bridgeId1: "bridgeId",
    }),
  },
  methods: {
     ...mapMutations("statistical", {
      setBridgeId: "BRIDGEID"
    }),
    //立面图片
    queryAllBridgeFacedByBridgeId(){
      this.$api.bridge.queryAllBridgeFacedByBridgeId({ownId:this.bridgeId}).then(res => {
        if(res.data.success){
          let data  = res.data.data[0]
          let str = data[0].twoDimension.path
          this.facedImg = this.download + str
          console.log(this.facedImg)
        }
      })
    },
     selectBridge() {
        // console.log(this.$refs.selectBridge)
        this.$refs.selectBridge.init();

      },
      getData(val) {
        // console.log("选择桥梁的数据", val)
         this.editableTabs = val
      this.editableTabsValue = val[0].id
      },
       removeTab(id) {
      console.log(id)
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === id) {
        tabs.forEach((tab, index) => {
          if (tab.id === id) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.id;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter((tab) => tab.id !== id);
    },
       // 获取所有桥梁
    getBridgeAll (){
      this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
        let ownInfo = JSON.parse(localStorage.getItem("ownInfo"))[0]; // 当前视图
          let birdgeListAll = res.data.data[0];
          // this.editableTabs = [birdgeListAll[0]]
          // this.editableTabsValue = birdgeListAll[0].id
          // this.bridgeId = this.editableTabsValue
          birdgeListAll.map((item, key) => {
          if (item.id == ownInfo.code) {
            this.editableTabs = [item];
            this.editableTabsValue = item.id;
            this.setBridgeId(item.id);
          }
        });
          // this.queryPointNumberByBridgeId()
          // this.countTodayType()
          // this.countAutoWeight()
          // this.trafficQuantityStatisticsByBridgeId()
          // this.queryMaintenanceLevelByBridgeId()
          // this.queryCountByBridgeId()
          // this.problemList()
          // this.distribution()
          // this.drawLine()
          // this.drawTrendPie()
        });
    },
      //监测总览
      queryPointNumberByBridgeId() {
        this.$api.healthMonitor.countTypePointNumber({
          ownId: this.bridgeId
        }).then(res => {
          if (res.data.success) {
            console.log(res.data.data)
            let data = res.data.data
            let arr = []
            data.map(v =>{
              // YU 修改！
              // if(v.allNumber !== 0) {
              //   arr.push(v)
              // }
              arr.push(v)
            })
            console.log(arr)
            this.countList = arr
            // data.map(v => {
            //   if (v.name === '环境监测') {
            //     this.monitorNumFirst = v.allNumber
            //   } else if (v.name === '整体响应') {
            //     this.monitorNumSecond = v.allNumber
            //   } else if (v.name === '局部响应') {
            //     this.monitorNumThird = v.allNumber
            //   } else {
            //     this.monitorNumForth = v.allNumber
            //   }
            // })
          }
        })
      },
      //今日车型对比
      countTodayType() {
        this.$api.healthMonitor.countTodayType({
          bridgeId: this.bridgeId
        }).then(res => {
          if (res.data.success) {
            // console.log(res.data.data)
            if(res.data.data.length > 0) {
              this.carPie = true
            let data = []
            res.data.data.forEach(item => {
              let obj = {
                value: item.countNum,
                name: item.auto_type_name
              }
              data.push(obj)
            })
            setTimeout(() => {
              this.drawPie(data)
            }, 1000);
          }  else{
            this.carPie = false
          }
          }
        })
      },
      //超限车次频次
      countAutoWeight() {
        this.$api.healthMonitor.countTodayAutoWeight({
          bridgeId: this.bridgeId
        }).then(res => {
          if (res.data.success) {
            if(res.data.data.length > 0) {
              this.carTotal = true
            this.trainRateData = []
            res.data.data.forEach(item => {
              this.trainRateData.push({
                info: `${item.plate}  ${item.auto_type_name}  车重：${item.AutoWeight}`,
                value: item.countCarPassNum,
                unit: '次'
              })
            })
            } else{
              this.carTotal = false
            }
          }
        })
      },
      //病害查看
      problemList() {
        this.$api.healthMonitor.problemList({
          id: this.bridgeId,
          name: '',
          userId: JSON.parse(localStorage.getItem('userInfo')).userId
        }).then(res => {
          if (res.data.success) {
            res.data.data.map(v => {
              v.arr = v.ext1.split(';')
              v.image = this.download + v.arr[0]
            })
            this.diseaseData = res.data.data
          }
        })
       },
       //技术评定
       queryMaintenanceLevelByBridgeId(){
         this.$api.healthMonitor.queryMaintenanceLevelByBridgeId({bridgeId:this.bridgeId}).then(res => {
           if(res.data.success) {
             let data = res.data.data
             switch(data) {
               case "0":
                 this.level = 'A级'
                 break
                case "1":
                  this.level = 'B级'
                  break
                case "2":
                  this.level = 'C级'
                  break
                case "3":
                  this.level = 'D级'
                  break
                case '4':
                  this.level = 'E级'
                  break
                case "5":
                  this.level = '合格'
                  break
                case "6":
                  this.level = '不合格'
                  break
             }
           }
         })
       },
       //养护次数
       queryCountByBridgeId(){
         this.$api.healthMonitor.queryCountByBridgeId({id:this.bridgeId}).then(res => {
           if(res.data.success) {
             this.pointNumber = res.data.data.value
           }
         })
       },
       //巡检次数
       distribution(){
         this.$api.healthMonitor.distribution({id:this.bridgeId}).then(res => {
           if(res.data.success) {
             this.distributionNum = res.data.data
           }
         })
       },
       //今日车流量对比
       trafficQuantityStatisticsByBridgeId() {
         this.$api.healthMonitor.trafficQuantityStatisticsByBridgeId({bridgeId:this.bridgeId}).then(res => {
           if(res.data.success) {
             let data = res.data.data
             if(data.length > 0) {
               this.carData = true
             setTimeout(() => {
               this.drawCarLine(data)
             }, 1000);
             } else {
               this.carData = false
             }
           }
         })
       },
       arrayToObj(arr, key) {
        let _obj = {};
        arr.forEach((item) => {
          _obj[item[key]] = item;
        })
        return _obj
      },
      drawCarLine(data) {
        let option = ((_data) => {
          return {
            grid: {
              top: '8%',
              right: '1%',
              left: '1%',
              bottom: '1%'
            },
            tooltip: {
              trigger: 'item',
              formatter:((item) => {
                return `${item.marker}${item.name}</br>数量：${item.value}`
              })
            },
            xAxis: {
              show: true,
              type: 'category',
              axisLine: {
                show: false
              }
            },
            yAxis: {
              type: 'value',
              show: false
            },
            series: [{
              name: '今日车流量对比',
              type: 'bar',
              itemStyle: {
                normal: {
                  color: function (params) {
                    let _colorList = [
                      '#1F5FD3', '#2061D3',
                      '#2A6FD8', '#2467D5',
                      '#2669d6', '#2A6FD8',
                      '#2C73D9', '#2b6ed8',
                      '#337cdd', '#327bdd',
                      '#3985df', '#3b88e0',
                      '#3e8de1', '#3f8fe3',
                      '#4193e3', '#4497e4',
                      '#479be5', '#4a9fe7',
                      '#51a9ea', '#52adeb',
                      '#53aeeb', '#57b2ec',
                      '#56b2ec', '#59b6ed',
                      '#5bbaef', '#5fbff0',
                      '#62c3f1', '#6dcbf4',
                      '#64c8f3', '#68ccf4',
                      '#6bd0f5', '#6cd0f6',
                      '#6ed4f6', '#70d9f8',
                      '#70d9f8', '#74defa',
                      '#73ddf9'
                    ];
                    return _colorList[params.dataIndex];
                  }
                }
              },
              data: _data
            }]
          }
        })
        this.carLine = new echarts.init(document.getElementById("car"))
        let lineData = []
        data.map(v => {
          lineData.push({value:v.number,name:v.date})
        })
        this.carLine.setOption(option(lineData));
      },
    drawPie (data) {
       let _data = data;
        const _title = "今日总计";
        let total = 0;
        data.forEach((item) => {
          total = total + item.value;
        });

        const _obj = this.arrayToObj(_data, 'name');
        // 基于准备好的dom，初始化echarts实例
        this.CarPie = new echarts.init(document.getElementById("CarPie"));
        // 绘制图表
        this.CarPie.setOption({
          backgroundColor: "#FFF",
          title: [{
            text: '{name|' + _title + '}\n{val|' + total + '}',
            top: 'center',
            left: '29%',
            textStyle: {
              rich: {
                name: {
                  fontSize: 12,
                  fontWeight: 400,
                  color: '#C9CED4',
                  padding: [10, 0],

                },
                val: {
                  fontSize: 24,
                  fontWeight: 'bold',
                  color: '#444444'
                }
              }
            },
            textAlign: 'center'
          }],
          legend: {
            orient: "vertical",
            top: "center",
            right: "10%",
            itemWidth: 12,
            itemHeight: 10,
            formatter: (name) => {
              return `${name}  ${_obj[name]['value']}`;
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color: ['#437CDF', '#8B57DF', '#32D6CD', '#32D17E', '#FBE033', '#FCAA5D'],
          series: [{
            name: "今日车型对比",
            type: "pie",
            radius: ["60%", "80%"],
            center: ["30%", "55%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data
          }, ],
        });
      },
      //病害趋势统计
      drawLine() {
        this.$api.healthMonitor.trend({
          id: this.bridgeId
        }).then(res => {
          console.log(321,res)
          if (res.data.success) {
            if(res.data.data.length > 0) {
              this.trendLineTotal = true
            let data1 = []
            let data2 = []
            res.data.data.forEach(item=>{
              data1.push(item.time)
              data2.push(item.num)
            })
            this.trendLine = new echarts.init(document.getElementById("trend-line"));
            this.trendLine.setOption({
              grid: {
                top: '15%',
                right: '5%',
                left: '5%',
                bottom: '12%'
              },
              tooltip: {
                trigger: 'axis'
              },
              xAxis: [{
                type: 'category',
                data:data1,
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#E5E6EB"
                  }
                },
                axisTick: {
                  show: false
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#E5E6EB"
                  }
                },
                boundaryGap: false,
                axisLabel: {
                  color: "#A7A6AF",
                  fontSize: 15
                }
              }],
              yAxis: [{
                type: 'value',
                axisTick: {
                  show: false
                },
                splitNumber: 4,
                splitLine: {
                  show: false
                },
                splitArea: {
                  show: true,
                  areaStyle: {
                    color: ['#F5F6FA', '#fff']
                  }
                },
                axisLine: {
                  show: true,
                  lineStyle: {
                    color: "#E5E6EB"
                  },
                },
                axisLabel: {
                  color: "#A7A6AF",
                  fontSize: 15
                }
              }],
              series: [{
                name: '',
                data: data2,
                type: 'line',
                symbol: 'emptyCircle',
                symbolSize: 8,
                lineStyle: {
                  color: '#699EE5',
                  shadowBlur: 12,
                  shadowColor: 'rgb(33,148,246,0.5)',
                  shadowOffsetX: 1,
                  shadowOffsetY: 1
                },
                itemStyle: {
                  color: '#699EE5',
                  borderWidth: 1
                }
              }]
            });
            }else {
              this.trendLineTotal = false
            }
          }

        })

      },
      drawTrendPie() {
        // console.log('321111111111111111')
        this.$api.healthMonitor.trend10({id:this.bridgeId}).then(res=>{
          if(res.data.success){
            // console.log(res.data.data,'111222')
            if(res.data.data.length > 0) {
              this.trendPieTotal = true
              let name = []
              let value = []
              let color = [ "#16d7e3","#2089cf","#91d9e3"]
              res.data.data.forEach((item,index)=>{
                name.push(item.key)
                value.push({
                  value:item.num,
                  name:item.key,
                  itemStyle:{
                    color:color[index]
                  }
                })
              })
              console.log(value,'值')
              this.trendPie = new echarts.init(document.getElementById("trend-pie"));

            this.trendPie.setOption({
              tooltip: {
                show: true,
                trigger: 'item',
                formatter: "{b}: {c} ({d}%)"
              },
              legend: {
                orient: 'vertical',
                icon: 'circle',
                itemWidth: 8,
                itemHeight: 8,
                right: '0%',
                align: 'left',
                top: 'middle',
                data: name
              },
              series: [{
                  name: '内',
                  type: 'pie',
                  radius: [0, '90%'],
                  center: ['50%', '50%'],
                  labelLine: {
                    show: false
                  },
                  label: {
                    show: false
                  },
                  selectedOffset: 2,
                  data: value
                },
                {
                  name: '外',
                  type: 'pie',
                  radius: ['55%', '75%'],
                  center: ['30%', '50%'],
                  labelLine: {
                    show: false
                  },
                  label: {
                    show: false
                  },
                  selectedOffset: 2,
                }
              ]
            });
            }else {
              this.trendPieTotal = false
            }

          }
        })
      }
    },
  };

</script>

<style lang="scss" scoped>
  .onlyMonitor {
    margin-bottom: 20px;
  }
  .search {
    display: flex;
    justify-content: start;
    background: #fff;
    padding: 15px 20px;
    margin-bottom: 15px;
    border-radius: 3px;
    .seletBtn {
      margin-right: 20px;
      height: 40px;
    }
     .top {
    position: relative;
    top: 6px;
  }
  }
  /deep/.el-tabs--card > .el-tabs__header .el-tabs__item {
  border-bottom: 1px solid #e4e7ed !important;
}
/deep/.is-active.el-tabs__item.is-top.is-active.is-closable {
  background: #327bdc !important;
  color: #fff !important;
}
  .bridge-init {
    line-height: 30px;
    font-size: 14px;
    margin-top: 15px;
    text-indent: 2em;
  }

  .changeBridge {
    margin-top: 15px;
  }

  // 桥梁卡片 截面图
  .bridge-card-pic {
    width: 100%;
    height: 744px;
  }

  .bridge-card-pic {
    display: flex;
    justify-content: space-between;

    .b-card {
      width: calc(100% - 397px);
      height: 100%;
      background: #fff;
    }

    .b-pic {
      width: 382px;
      height: calc(100% + 15px);
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &>div {
        height: calc(50% - 7.5px);
        background: #fff;
      }
    }

    .bridge-img {
      width: 98%;
      height: 100%;
      margin-top: 20px;
    }
  }

  // car
  .car-content {
    width: 100%;
    height: 270px;
    display: flex;
    justify-content: space-between;
    margin-top: 30px;

    &>div {
      width: calc((100% - 30px) / 3);
      height: 100%;
      background: #fff;
    }
  }

  #CarPie {
    height: 200px;
    margin-top: 10px;
    width: 100%;
    overflow: hidden
  }

  .carList {
    height: 210px;
  }

  .todayAll {
    height: 210px;
  }

  .todayAll-top {
    height: 50%;
    display: flex;
    justify-content: space-between;

    div {
      width: 50%;
      height: 100%;
    }

    padding-top: 25px;
    padding-left: 10px;
  }

  .todayAll-bottom {
    height: 50%;
    text-align: center;

    img {
      width: 95%;
      margin-top: 20px;
    }
  }

  .top-num1 {
    display: flex;
    justify-content: start;
  }

  .top-number {
    position: relative;
    left: -28%;
    top: -5px;

    p {
      color: #a9b3c4;
    }
  }

  // 病害分布
  .diseaseDistribution {
    margin-top: 30px;
  }

  .Distribution-content {
    display: flex;
    justify-content: space-between;
    height: 320px;

    .Distribution-content-left {
      width: calc(100% - 345px);

      .img {
        width: 100%;
        height:65%;
      }

      .top {
        height: 80px;
        display: flex;
        justify-content: start;

        &>div {
          display: flex;
          justify-content: start;
          margin-top: 30px;

          img {
            margin-right: 10px;
          }

          &>div:last-child {
            margin-right: 50px;

            p {
              font-size: 16px;
              font-weight: bold;
            }

            p:last-child {
              font-size: 12px;
              color: #666666;
              font-weight: 500;
            }
          }
        }
      }
    }

    .Distribution-content-right {
      width: 345px;
      border: 1px solid rgba(238, 239, 243, 1);
      margin-top: 20px;
    }

    .disease {
      padding: 10px;
      width: 100%;
      height: 100%;

      h3 {
        font-size: 16px;
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        line-height: 45px;
      }

      &-line {
        display: flex;
        margin-bottom: 20px;
      }

      &-left {
        flex: 0 0 44px;
        height: 44px;
        border-radius: 4px;

        img {
          width: 100%;
          height: 100%;
          border-radius: 4px;
          border: 1px solid rgba(238, 239, 243, 1);
        }
      }

      &-right {
        flex: 1;
        padding-left: 10px;

        h4 {
          font-size: 14px;
          font-weight: 500;
          color: rgba(102, 102, 102, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 22px;
        }

        p {
          font-size: 14px;
          font-weight: 400;
          color: rgba(153, 153, 153, 1);
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          line-height: 22px;
        }
      }
    }
  }

  .overView {
    margin-top: 30px;
  }

  .trend {
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 260px;
    margin-top: 30px;

    &-left {
      width: calc(100% - 397px);
      height: 100%;
      background: #fff;
    }

    &-line {
      width: 100%;
      height: 185px;
    }

    &-right {
      width: 382px;
      height: 100%;
      background: #fff;
    }

    &-pie {
      width: 100%;
      height: 185px;
    }
  }

  .content-all {
    display: flex;
    justify-content: space-between;
    padding-left: 30px;
    padding-right: 30px;
    box-sizing: border-box;

    .all-tab {
      margin-top: 30px;
      display: flex;
      justify-content: start;

      .logoImg {
        width: 52px;
        height: 52px;

      }

      div {
        margin-top: 2px;
        margin-left: 15px;

        p {
          font-weight: 600;
          font-size: 20px;
          color: #4E5C77;
        }

        span {
          color: #BEC4D0;
          font-size: 14px;
        }
      }

      .lineImg {
        margin-left: 14px;
        margin-top: 10px
      }
    }
  }
  .trend-pie{
    margin-top: 20px;
    width: 100%;
    height: 150px;
    /* border:1px solid black */
  }
  .bgbg{
    width: calc(100% - 30px);
    height:calc(100% - 80px);;
    background-size: 100% 100%;
    background-repeat:no-repeat
  }
</style>
